<template>
	<view class="view_pages">
		<u-navbar :is-back="true" :custom-back="gotabpolice" back-icon-color="#000000" title-size="34" title="选择设备端口" background="transparent" :border-bottom="false" title-color="#000000"></u-navbar>

		<view class="char-top">
			<view class="_top padding_layout">
				<view class="port_num"> 
				<image src="https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/lr3pwTTWy5rV88b57cf41ea381e05df3f643e3ce18c8_1632713989356.png" mode=""></image>
				编号：{{ detail.pdCharginWxd.deviceCode }}</view>
					<view class="_bottom" v-if="detail.iotChargingPileDto.onlineResponse.online > 0 && detail.iotChargingPileDto.onlineResponse.signal > 0">
						<view class="status blue">空闲 {{detail.iotChargingPileDto.freePortNum}}</view>
						<view class="status gray">充电 {{detail.iotChargingPileDto.busyPortNum}}</view>
					</view>
			</view>
			<view class="address_box padding_layout" @click="navmap">
				<image src="../../static/images/icons/icon-location.png" mode=""></image>
				<view class="address">{{detail.pdCharginWxd.adArea}}</view>
			</view>
		</view>
		
		<view class="char-2-title">
			选择端口
		</view>
		<view class="port_list_wraper padding_layout">
			<!-- :class="{ active: item.status == 0 , selected: selectPort == index }" -->
			<view
				class="port_box"
				v-for="(item, index) in detail.iotChargingPileDto.portDtoList"
				:class="{ active: item.status == 0  , bs:item.status == 1, selected: selectPort == index}"
				:key="index"
				@click="changePort(item.status, index)"
			>
				<view class="_status">{{ item.status == 0 ? '空闲' : '充电中' }}</view>
				端口{{ index }}
			</view>
		</view>

		<!-- <u-gap height="30" bg-color=" #F9F9F9"></u-gap> -->

		<view class="time_list_wraper">
			<view >
				<u-tabs :list="typelist" :is-scroll="false" :current="current" @change="change" font-size="28"></u-tabs>
			</view>
			<!-- <view class="_head padding_layout">
				<view class="title">{{ typeTitles[showType] }}</view>
				<view class="btn" @click="selectVisible = !selectVisible">
					<image src="../../static/images/icons/icon-switch.png" mode=""></image>
					<view class="btn_txt">切换模式</view>

					<view class="selected_box" v-if="selectVisible">
						<view class="_li" @click="chooseMode(0)" v-if="showType != 0">充满即停</view>
						<view class="_li" @click="chooseMode(1)" v-if="showType != 1">充电时长(小时)</view>
						<view class="_li" @click="chooseMode(2)" v-if="showType != 2">充电电量(度)</view>
					</view>
				</view>
			</view> -->

			<view class="list padding_layout">
				<template v-if="showType == 0">
					<view class="auto_full_btn" @click="checkpaydown">
						<image src="../../static/images/icons/icon-char-stop.png" mode=""></image>
						<view class="text">充满即停</view>
					</view>
				</template>
				<template v-if="showType == 1">
					<view class="item" v-for="(item, index) in timeList" :key="index" :class="{ select_active: timeSelected == item }" @click="selcetHandle(item)">
						{{ item }}小时
					</view>
					<view class="item more" :class="{ select_active: timeSelected > 3 }" @click="popupVisible = true">
						{{ timeSelected > 3 ? timeSelected + '小时' : '更多选择' }}
						<image v-if="timeSelected > 3" src="../../static/images/icons/down@2x.png" mode=""></image>
						<image v-if="timeSelected < 3" src="../../static/images/icons/icon-char-down-grey.png" mode=""></image>
					</view>
				</template>

				<template v-if="showType == 2">
					<view class="item" v-for="(item, index) in eList" :key="index" :class="{ select_active: eSelected == item }" @click="selcetHandle(item)">{{ item }}度</view>
					<view class="item more" :class="{ select_active: eSelected > 3 }" @click="popupVisible = true">
						{{ eSelected > 3 ? eSelected + '度' : '更多选择' }}
						<image v-if="eSelected  > 3" src="../../static/images/icons/down@2x.png" mode=""></image>
						<image v-if="eSelected  < 3" src="../../static/images/icons/icon-char-down-grey.png" mode=""></image>
					</view>
				</template>
			</view>
		</view>

		<view class="btn_submit" @click="submitCharge" v-if="showType != 0">立即充电</view>

		<u-popup class="popup_List" mode="bottom" border-radius="32" v-model="popupVisible">
			<view class="pop_body">
				<view class="title">{{ showType == 1 ? '充电时长(小时)' : '充电电量(度)' }}</view>
				<view class="_lists" v-if="showType == 1">
					<view class="_item" :class="{ active: popupSelectNum == item }" v-for="(item, index) in moreTimeList" @click="popupSelectNum = item">{{ item }}小时</view>
				</view>
				<view class="_lists" v-if="showType == 2">
					<view class="_item" :class="{ active: popupSelectNum == item }" v-for="(item, index) in moreEleList" @click="popupSelectNum = item">{{ item }}度</view>
				</view>
				<view class="confirm_btn" @click="confirmPopup">确定</view>
			</view>
		</u-popup>

		<u-mask :show="showTipsVisible" :mask-click-able="true" :duration="400" :zoom="false" :custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }" @click="showTipsVisible=false ,shopstop = false">
			<view class="dialog_warp">
				<view class="dialog_body">
					<image class="close_icon" src="../../static/images/icons/icon-close@2x.png"  @click="showTipsVisible=false" mode=""></image>
					<view class="title">
						<image src="../../static/images/icons/icon-tips@2x.png" mode=""></image>
						温馨提示
					</view>
					<view class="content">{{errortext}}</view>
					<view class="_btns">
						<view class="_btn" @click="navurl('./topUp-center')">立即充值</view>
						<view class="_btn _btn1" @click="showTipsVisible=false , shopstop = false">其它方式</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		<view class="dialog_warp" v-if="bindPhoneVisible">
			<view class="masker"> </view>
			<view class="dialog_body">
				<image class="close_icon" src="../../static/images/icons/icon-close@2x.png" @click="closeBindPhone" mode=""></image>
				<view class="title">
					<image src="../../static/images/icons/icon-tips@2x.png" mode=""></image>
					绑定手机
				</view>
				<view class="input_box phone_box">
					<view class="left">
						<image src="../../static/images/icons/icon-phone@2x.png" mode="" v-if="!mobile"></image>
						<image src="../../static/images/icons/icon-acitve-phone@2x.png" mode="" v-else></image>
						<u-input v-model="mobile" placeholder="请输入手机号" @blur="phoneBlur" @input="phoneInput"
							type="number" maxlength="11" />
					</view>
					<view class="error" v-if="moblieError">{{moblieError}} </view>
				</view>
		
		
				<view class="input_box code_box">
					<view class="left">
						<image src="../../static/images/icons/icon-pass.png" mode="" v-if="!codeValue"></image>
						<image src="../../static/images/icons/icon-active-pass@2x.png" mode="" v-else></image>
						<u-input v-model="codeValue" placeholder="请输入验证码" type="number" />
					</view>
					<view class="verification_code">
						<u-verification-code :seconds="60" change-text="Xs重新发送" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<view class="_btn" @tap="getCodeHandle">{{codeTips}}</view>
					</view>
				</view>
		
				<view class="submit_btn" @click="confirmBindPhoneFn"  type="success" lang="zh_CN" :ripple="true" shape="circle">确定</view>
		
			</view>

		
		</view>
		<!-- 遮罩层 -->
		<view class="maskshop" v-if="shopstop == true">
			
			 <view class="text">
				加载中
			 </view>	
		</view> 
	</view>
</template>

<script>
import { findCharginByCode, startCharging ,findTenantsPay } from '../../api/charging';
import {
		sendMsmForBindingPhone,
		bindingPhone,
		loginForWechat,
	} from "../../api/login";
	
export default {
	data() {
		return {
			shopstop:false,
			showTipsVisible: false,
			popupVisible: false,
			selectVisible: false,
			showType: 0, //0充满即停 1时间 2度数
			typeTitles: ['充满即停', '充电时长(小时)', '充电电量(度)'],
			typelist: [
				{name:'充满即停'},
				{name:'充电时长(小时)'},
				{name:'充电电量(度)'},
			],
			timeList: [1, 2, 3], //时间选择队列
			eList: [1, 2, 3], //电量选择队列
			moreTimeList: [4, 5, 6, 7, 8],
			moreEleList: [4, 5, 6, 7],
			timeSelected: 0, //选择的充电充电时长
			eSelected: 0, //选择的充电充电度数
			detail: {
				freePortNum: 0,
				busyPortNum: 0,
				portDtoList: []
			},
			popupSelectNum: '', //弹窗选择时长/度数
			selectPort: '',
			userinfo:'', //用户信息
			purchaseQuantity:'',//参数数值
			mobile: '',
			codeValue: '',
			moblieError: '',
			bindPhoneVisible: false,
			model: {},
			codeTips: '',
			errortext:'',
			current:0,
		};
	},
	onLoad(option) {
		console.log(option,'充电站编号')
		// 必须要 decodeURIComponent 格式化一下，不然里面的符号会是 %23... 这样的格式
		let scene =  decodeURIComponent(option.q)
		let deviceCode = scene.split('?=')[1]
		let token = uni.getStorageSync('token')
		
		
		
	//判断用户是否已登录
		
	  if(!token){
		  uni.reLaunch({
		  	url:'../login/loginwechat?deviceCode='+deviceCode
		  })
		  
	  }else{
		  if(option.q){ 
			  this.getchargeDetail(deviceCode);
		  }else{
			  this.getchargeDetail(option.deviceCode);
		  }
		  this.checkpay()
		  // this.checkphone()
	  }
   

		
	},

	methods: {
		navmap(){
				        uni.openLocation({
				            latitude: this.detail.pdCharginWxd.adLatitude,
				            longitude: this.detail.pdCharginWxd.adLongitude,
				            success: function () {
				                console.log('success');
				            }
				        });
			
		},
		//用于重定向过来的页面返回
		gotabpolice(){
			uni.reLaunch({
				url:'./find'
			})
		},
		//跳转
		navurl(url){
			uni.navigateTo({
				url:url
			})
		},
		//检查用户余额是否低于30
		checkpaydown(){
				if (this.selectPort == '') {
					uni.showToast({
						title: '请选择端口',
						duration: 2000
					});
					return;
				}
				this.shopstop = true
				startCharging({
					buyType:1 ,
					deviceCode: this.detail.pdCharginWxd.deviceCode,
					portNum: this.selectPort
				}).then(res => {
					
					console.log(res.message,'报错error')
					if (res.code == 200) {
						console.log(res)
						this.shopstop = false
						uni.showToast({
							title: '开始充电',
							duration: 1000,
							icon:'success'
						});
						setTimeout(function () {
						    uni.navigateTo({
						    	url:'./status'
						    })
						}, 1000);
						this.getchargeDetail(this.detail.pdCharginWxd.deviceCode)
					}else if(res.code ==3001){
						this.showTipsVisible = true
						this.errortext = res.message
					}
				});
			
		},
		//查询用户钱包
		checkpay() {
			findTenantsPay().then(res => {
				this.userinfo = res.result
			})
		},
		//查询用户是否有手机号码
		checkphone(){
			let userinfo = uni.getStorageSync('userInfo')
			
			if(userinfo.pdTenants.phoneNum == null || userinfo.pdTenants.phoneNum == ''){
				this.bindPhoneVisible =  true
			}else{
				this.bindPhoneVisible = false
			}
		},
		confirmPopup() {
			if (this.showType == 1) {
				this.timeSelected = this.popupSelectNum;
				this.purchaseQuantity = this.popupSelectNum;
			}
			if (this.showType == 2) {
				this.eSelected = this.popupSelectNum;
				this.purchaseQuantity = this.popupSelectNum;
			}
			this.popupVisible = false;
		},

		//切换模式
		change(index){
			this.showType = index;
			this.timeSelected = 0;
			this.eSelected = 0;
			this.popupSelectNum = 0;
			this.current = index;
		},
		chooseMode(type) {
			this.showType = type;
			this.timeSelected = 0;
			this.eSelected = 0;
			this.popupSelectNum = 0;
		},
		changePort(status, index) {
			if (status == 0) {
				this.selectPort = index;
			}
		},
		//获取充电站详情
		getchargeDetail(code) {
			findCharginByCode({
				deviceCode: code
			}).then(res => {
				if (res.code == 200) {
					this.detail = res.result;
					console.log(this.detail);
				}
			});
		},
		selcetHandle(item) {
			if (this.showType == 1) {
				this.timeSelected = item;
				this.purchaseQuantity = item
			} else {
				this.eSelected = item;
				this.purchaseQuantity = item
			}
		},
		submitCharge() {

			if (this.selectPort == '') {
				uni.showToast({
					title: '请选择端口',
					duration: 2000,
					icon:'error'
				});
				return;
			}
			if(this.purchaseQuantity ==''){
				uni.showToast({
					title: '请选择时间/度',
					duration: 2000,
					icon:'error'
				});
				return;
			}
			// typeTitles: ['充满即停', '充电时长(小时)', '充电电量(度)'],
			let buyType = ''
			if(this.showType == 0){
				buyType = 1
			}else if(this.showType == 1){
				buyType = 3
			}else if(this.showType == 2){
				buyType = 2
			}
			
		
			
			
				startCharging({
					buyType:buyType ,
					deviceCode: this.detail.pdCharginWxd.deviceCode,
					purchaseQuantity: this.purchaseQuantity,
					portNum: this.selectPort
				}).then(res => {
					if (res.code == 200) {
						console.log(res)
						
						uni.showToast({
							title: '开始充电',
							duration: 2000,
							icon:'success'
						});
						
						
						setTimeout(function () {
							uni.reLaunch({
								url:'./status'
							})
						}, 2000);
						this.getchargeDetail(this.detail.pdCharginWxd.deviceCode)
					}else if(res.code ==3001){
						this.showTipsVisible = true
						this.errortext = res.message
					}
				});
			
		},
		//绑定手机号
		confirmBindPhoneFn(){
			let _this = this;
			if(this.mobile && this.codeValue){
				bindingPhone({
					code:this.codeValue,
					phoneNum:this.mobile
				}).then(res=>{
					uni.showToast({
					    title: '绑定成功！',
					    duration: 2000
					});
					uni.setStorageSync('userInfo', res.result);
					uni.setStorageSync('token', res.result.token);
					_this.bindPhoneVisible = false
				
				})
			}else{
				if(this.mobile == ''){
					uni.showToast({
						icon:'none',
					    title: '请输入手机号',
					    duration: 2000
					});
					return
				}
				if(this.codeValue == ''){
					uni.showToast({
						icon:"none",
					    title: '请输入验证码',
					    duration: 2000
					});
					return
				}
			}
		},
		codeChange(text) {
			this.codeTips = text;
		},
		//获取验证码
		getCodeHandle() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码' 
				})
				
				sendMsmForBindingPhone(this.mobile).then(res=>{
					if(res.code == 200){
					// 这里此提示会被this.start()方法中的提示覆盖
						uni.hideLoading();
					// 通知验证码组件内部开始倒计时
						this.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					}
				})
				
			
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			this.$u.toast('倒计时结束');
		},
		start() {
			this.$u.toast('倒计时开始');
		},
		maskClick(e) {
			console.log(e)
		},
		closeBindPhone(){
			this.bindPhoneVisible = false
		},
		phoneBlur() {
			if (this.mobile == '') {
				this.moblieError = '请输入手机号'
				return
			}
			if (!this.$u.test.mobile(this.mobile)) {
				this.moblieError = '手机号码不正确'
				return
			}
			this.moblieError = ''
		},
		phoneInput() {
		
		},
	},
	onShareAppMessage(res){
			return {
			  title: '邀请您使用智能充电站编号:'+this.detail.pdCharginWxd.deviceCode,
			  path: '/pages/select-port/select-port?deviceCode='+this.detail.pdCharginWxd.deviceCode,
			  success: function (res) {
			    // 转发成功
			    wx.showToast({
			      title: '分享成功',
			      icon: 'none'
			    })
			  },
			  fail: function (res) {
			    // 转发失败
			  }
			}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}


.char-2-title{
	width: 92%;
	height: 90rpx;
	line-height: 90rpx;
	color: #303133;
	font-weight: 400;
	font-size: 32rpx;
	margin: 0 auto;
}
.padding_layout {
	padding: 0 30rpx;
}

.line {
	width: 100%;
	height: 30rpx;
	background: #f9f9f9;
}
.address_box {
	display: flex;
	align-items: center;
	margin-top: 18rpx;
	image {
		width: 28rpx;
		height: 28rpx;
	}
	.address {
		font-size: 26rpx;

		font-weight: 400;
		color: #909399;
		margin-left: 26rpx;
	}
}
.char-top{
	padding: 30rpx 0;
	border-bottom: 2rpx solid #F3F4F6;
}
._top {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.port_num {
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		display: flex;
		justify-content: center;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}


		
		._bottom {
			display: flex;
				// margin-top: 30rpx;
			.status {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				margin-right: 38rpx;
		
				&::before {
					display: inline-block;
					content: '';
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
			}
			.blue {
				color: #0A348B;
				&::before {
					background-color:#0A348B ;
				}
			}
			
			.gray {
				color: #BCBCBC;
				&::before {
					background-color:#BCBCBC ;
				}
			}
		}

}

.port_list_wraper {
	display: flex;
	flex-wrap: wrap;
	margin-top: 26rpx;
	border-bottom: 2rpx solid #F3F4F6;
	.port_box {
		position: relative;
		width: 330rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 30rpx;
		border: 2rpx solid #B6D2FD;
		color: #6988CA;

		font-weight: 400;
		text-align: center;
		background: transparent;
		border-radius: 16rpx;
		margin-bottom: 34rpx;
		overflow: hidden;

		&:nth-child(2n + 1) {
			margin-right: 30rpx;
		}

		._status {
			position: absolute;
			top: 0;
			left: -2rpx;
			width: 88rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 16rpx 0 16rpx 0;
			font-size: 24rpx;
			background: #cacaca;
			color: #ffffff;
			font-weight: 400;
		}
	}

	.active {
		color: #0a348b;
		._status {
			background: #B6D2FD;
		}
	}
	.bs{
		border:2rpx solid #cacaca;
		color: #949494;
	}
	.selected {
		color: #0a348b;
		border: 2rpx solid #0a348b;
		background-color: #EFF4FF;
		._status {
			background: #0A348B;
		}
	}
	
}

.time_list_wraper {
	._head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: 400;
			color: #000000;
		}

		.btn {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 166rpx;
			border-radius: 22rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #a6a6a6;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 2rpx;
			}

			.btn_txt {
				margin-left: 10rpx;
			}
			.selected_box {
				position: absolute;
				z-index: 78;
				top: 60rpx;
				left: -110rpx;
				width: 278rpx;
				height: 176rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 4rpx rgba(10, 52, 139, 0.12);
				border-radius: 16rpx;
				._li {
					width: 100%;
					padding: 24rpx 44rpx;
					text-align: center;
					border: 2rpx solid #f1f1f1;
				}
				._li:last-child {
				
					border: 0rpx solid #f1f1f1;
				}
			}
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		.auto_full_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 690rpx;
			height: 100rpx;
			background-image: url('https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/G0RTEANAIfwR7ba90e63426d3b678ba6937bfff3e3c9_1632713767196.png') ;
			background-size: 100% ;
			border-radius: 16rpx;
			image {
				width: 46rpx;
				height: 26rpx;
			}
			.text {
				margin-left: 14rpx;
				font-size: 30rpx;
				color: #ffffff;
				font-weight: 400;
			}
		}
		.item {
			position: relative;
			width: 330rpx;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 30rpx;
			color: #000000;
			font-weight: 400;
			text-align: center;
			border-radius: 16rpx;
			margin-bottom: 34rpx;

			border: 2rpx solid #cecece;
			overflow: hidden;

			&:nth-child(2n + 1) {
				margin-right: 30rpx;
			}
		}
		.more {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #000000;
			font-weight: 400;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.select_active {
			border: 2rpx solid #0a348b;

			background: #eff4ff;
		}
	}
}

.popup_List {
	.pop_body {
		padding: 0rpx 40rpx;
	}
	.title {
		margin-top: 42rpx;

		font-size: 32rpx;
		color: #000000;
		font-weight: 400;
	}
	._lists {
		margin-top: 34rpx;
		._item {
			width: 100%;
			height: 80rpx;
			line-height: 78rpx;
			border-radius: 16rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #303133;

			border: 2rpx solid #cecece;
			margin-bottom: 30rpx;
		}
		.active {
			border: 2px solid #0a348b;
			color: #0a348b;
		}
	}
	.confirm_btn {
		width: 100%;
		height: 80rpx;
		line-height: 78rpx;
		border-radius: 16rpx;
		text-align: center;

		font-weight: 400;
		color: #ffffff;
		font-size: 32rpx;
		background: #0a348b;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
	}
}
.dialog_warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 30rpx;
}
.dialog_body {
	position: relative;
	width: 690rpx;
	background: #ffffff;
	border-radius: 16rpx;
	background-color: #ffffff;
	flex-shrink: 0;
	padding: 30rpx;
	.close_icon {
		position: absolute;
		right: 42rpx;
		top: 52rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 36rpx;
		color: #000000;
		margin-top: 44rpx;
		margin-bottom: 66rpx;

		image {
			margin-right: 24rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.content {
		font-size: 32rpx;
		text-align: center;
	}
	._btns{
		margin-top: 80rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		._btn{
			width: 284rpx;
			height: 90rpx;
			line-height: 88rpx;
			background: #0A348B;
			color: #fff;
			border-radius: 20rpx;
			text-align: center;
		}
		._btn1{
			
background: #C0C4CC;
		}
	}
}

.btn_submit {
	width: 690rpx;
	height: 90rpx;
	margin: 0 auto;
	background-image: url('https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/G0RTEANAIfwR7ba90e63426d3b678ba6937bfff3e3c9_1632713767196.png') ;
	background-size: 100% 100%;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	line-height: 90rpx;
}

	.dialog_warp {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			z-index: 77;
			width: 100%;
			height: 100%;
			padding: 0rpx 30rpx;
	
			.error {
				font-size: 24rpx;
				font-weight: 400;
				color: #FABA30;
			}
	
			.masker {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: #0000007a;
				z-index: 0;
			}
	
			.dialog_body {
				position: relative;
				z-index: 2;
				width: 660rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				background-color: #FFFFFF;
	margin-top: -100rpx;
				.close_icon {
					position: absolute;
					right: 42rpx;
					top: 52rpx;
					width: 32rpx;
					height: 32rpx;
				}
	
				.title {
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
					margin-top: 44rpx;
					margin-bottom: 66rpx;
	
					image {
						margin-right: 24rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
	
				.input_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 610rpx;
					border-bottom: 2rpx solid #F1F1F1;
					margin: 10rpx auto;
	
					.left {
						display: flex;
						align-items: center;
					}
	
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 18rpx;
					}
	
					.phone_input {}
				}
	
				.code_box {
					margin-top: 50rpx;
					margin-bottom: 66rpx;
	
					._btn {
						font-size: 28rpx;
						font-weight: 400;
						color: #0A348B;
					}
				}
	
				.submit_btn {
					width: 610rpx;
					height: 90rpx;
					background: #0A348B;
					border-radius: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					font-size: 34rpx;
					text-align: center;
					line-height: 90rpx;
					margin: 0rpx auto;
				}
	
	
	
			}
		}
</style>
